<template>
    <div>
      <el-form :inline="true">
        <el-form-item>
          <el-select
            @change="changeQuestionType"
            v-model="queryParams.question_type"
            filterable
            clearable
            placeholder="试题类型">
            <el-option
              v-for="item in questionTypeList"
              :key="item.id"
              :label="item.value"
              :value="item.code">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" plain @click="addQuestion" icon="el-icon-plus">题库导入</el-button>
        </el-form-item>

        <!--<el-form-item>-->
        <!--<el-button type="primary" icon="el-icon-upload2">导出</el-button>-->
        <!--</el-form-item>-->
      </el-form>

      <el-table style="width: 100%" :data="questionListForPaper">

        <el-table-column
          prop="paper_question_sort"
          width="80"
          label="序号">
        </el-table-column>

        <el-table-column
          prop="content"
          :show-overflow-tooltip="true"
          label="试题内容"
          min-width="150">
          <template slot-scope="scope">
            <div v-html="scope.row.content"></div>
          </template>
        </el-table-column>

        <el-table-column
          prop="question_type"
          label="试题类型"
          width="100">
          <template slot-scope="scope">
            <el-tag size="small" >{{scope.row.question_type | getQuestionTypeName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          prop="subject_name"
          label="科目"
          width="120">
        </el-table-column>

        <el-table-column
          prop="mark"
          label="分数"
          width="120">
        </el-table-column>


        <el-table-column
          prop="grade_type"
          width="120"
          label="年级">
          <template slot-scope="scope">
            <el-tag size="small">{{scope.row.grade_type | getGradeName}}</el-tag>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          width="250"
          label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              @click="updateMark(scope.row)"
              type="warning">修改</el-button>
            <!--<el-button
              size="small"
              @click="updateMark(scope.row)"
              type="warning">设置分数</el-button>-->

            <!--<el-button
              size="small"
              @click="updateSort(scope.row)"
              type="warning">排序</el-button>-->

            <el-button
              size="small"
              @click="deleteQuestionForPaper(scope.row)"
              type="danger">移除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        :total="totalCount"
        layout="total, prev, pager, next, jumper">
      </el-pagination>

    </div>
</template>

<script>
    let thisPage = null
    import {getQuestionTypeApi, getGradeType} from '@/utils/education-api'
    export default {
      name: 'paperQuestionManager',
      data () {
        return {
          gradeTypeList: [],
          queryLanguagePointsArrayId: [],
          questionDialog: false,
          questionTypeList: [],
          questionList: [],
          questionListForPaper: [],
          queryParams: {},
          dialogVisible: false,
          currentPage: 1,
          questionCurrentPage: 1,
          pageSize: 10,
          questionPageSize: 10,
          totalCount: 0,
          checkQuestionArray: [],
          questionType: '',
          checkDeleteQuestionIds: [],
          questionTotalCount: 0,
          checkedLanguagePointsId: ''
        }
      },

      beforeCreate () {
        thisPage = this
      },

      mounted () {
        this.queryParams = this.$store.getters['map/getPaperQuestionParams']
        getQuestionTypeApi(data => {
          this.questionTypeList = data
        })

        getGradeType(data => {
          this.gradeTypeList = data
        })
        this.getQuestionListForPaper()
      },

      methods: {

        handleSizeChange () {

        },

        handleCurrentChange () {

        },

        addQuestion () {

        },

        changeQuestionType (val) {
          this.queryParams.questionType = val
          this.getQuestionListForPaper()
        },

        // 获取试卷关联试题列表
        getQuestionListForPaper () {
          let that = this
          that.axios.get(that.$http.httpUrl('/system/testPaper/getPaperQuestionList'), {
            params: {
              questionType: that.queryParams.questionType,
              testPaperInfoId: that.queryParams.id,
              currentPage: that.currentPage,
              offset: (that.currentPage - 1) * that.pageSize,
              limit: that.pageSize
            }
          }).then(function (response) {
            that.questionListForPaper = response.data.data.dataList
            that.totalCount = response.data.data.total
          }).catch(function (error) {
            console.log(error)
          })
        }
      },

      filters: {
        getGradeName (gradeType) {
          for (let i = 0; i < thisPage.gradeTypeList.length; i++) {
            if (thisPage.gradeTypeList[i].code === gradeType) {
              return thisPage.gradeTypeList[i].value
            }
          }
          return '无'
        },

        getQuestionTypeName (questionType) {
          for (let i = 0; i < thisPage.questionTypeList.length; i++) {
            if (thisPage.questionTypeList[i].code === questionType) {
              return thisPage.questionTypeList[i].value
            }
          }
        }
      }
    }
</script>

<style scoped>

</style>
